<template>
	<div class="bgcard">
		<div class="card_content">
			<div :class="(cardType !== 'E' && cardType !== 'D') || secondaryCalliper !== '0' ?'card_top' : 'card_topD'">
				<div>享受您的专属权益</div>
				<div class="card_top_line"></div>
				<div style="display: flex; justify-content: space-between;">
					<div class="card_top_t">各种权益免费送！</div>
					<div class="home" v-if="(cardType == 'D' || cardType == 'E') && secondaryCalliper == '0'"
						@click="to_home()">
						<img class="home_img" src="/static/images/card/home.png" alt="">
						<div class="home_t">家庭成员列表 ></div>
					</div>
				</div>
			</div>
			<div class="card">
				<div class="card_detail" :style="[{backgroundImage:'url(' + cover + ')' }]">
				<!-- <div :class="cardType == 'A' ?'card_detail' : (cardType == 'C' ? 'card_cdetail' : 'card_ddetail')"> -->
					<div :class="cardType == 'C' ?'card_number' : 'card_numberA'">{{cardOne}}</div>
				</div>
			</div>
			<div class="card_number card_change" v-if="this.cardList.length > 1" @click="change">切换卡 ></div>
			<div class="card_illustrate">
				<div class="illustrates">
					<div class="illustrate">
						<img class="illustrate_img" src="/static/images/card/checkup.png" alt="">
						<div class="illustrate_t">早期检测</div>
					</div>
					<div class="illustrate_line"></div>
					<div class="illustrate">
						<img class="illustrate_img" src="/static/images/card/help.png" alt="">
						<div class="illustrate_t">精准用药</div>
					</div>
					<div class="illustrate_line"></div>
					<div class="illustrate">
						<img class="illustrate_img" src="/static/images/card/health.png" alt="">
						<div class="illustrate_t">健康管理</div>
					</div>
				</div>
				<div v-if="this.cardList.length > 0" class="card_illustrate_btn" @click="to_interest">查看此卡权益</div>
				<div class="card_illustrate_phone">
					<img class="card_illustrate_phone_img" src="/static/images/card/phone.png" alt="">
					<div>4008-596-598</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	import { baseUrl } from "@/config/tendIdConfig"
	
	import { mapGetters } from "vuex"
	export default {
		name: "myInterest",
		data() {
			return {
				cardList: {},
				cardNum: [],
				cardType: 'A',
				cardOne: '',
				maturityTime: '',
				cardId: '',
				secondaryCalliper: '',
				cover:''
			};
		},
		 beforeDestroy() {
        if (this.isLogin) {
            uni.removeStorageSync("loginBackUrl");
            uni.removeStorageSync("loginBackUrlOption");
        }
    },
		onLoad() {
			var pages = getCurrentPages(); // 获取栈实例
			if (pages.length === 1) {
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				let currentPage = pages[pages.length - 1]["$page"]["fullPath"]; //当前页面路径(带参数)
				uni.setStorageSync("loginBackUrl", currentPage);
			}
			if (!this.isLogin) return uni.navigateTo({ url: "/pages/user/phone/indexApp" })
			this.getList();
		},
		computed: mapGetters(["userInfo", "isLogin"]),
		methods: {
			getList() {
				const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
				const that = this;
				uni.request({
				   url: baseUrl + '/customer/equityInfoH5/web/web/equityCardQueryWithCardInfo',
				    method: "POST",
					header: {
						Authorization: token
					},
				    data: {
				    },
				    success(res) {
						// if ([991, 992, 401].includes(res.data.code)) {
						// 	that.getCardLoginToken()
						//     return;
						// }
				        that.cardList = res.data.data
				        console.log(that.cardList, "数据");
				        if (that.cardList.length > 1) {
				        	that.cardNum = that.cardList.slice(0, 1)
				        	that.cardNum.forEach(res => {
				        		let cardDeatil = res
				        		that.cardOne = cardDeatil.cardNum
				        		that.cardType = cardDeatil.cardType
				        		that.cardId = cardDeatil.id
				        		that.secondaryCalliper = cardDeatil.secondaryCalliper
				        		that.maturityTime = cardDeatil.maturityTime
								that.cover = cardDeatil.cover
				        	})
				        } else {
				        	that.cardNum = that.cardList
				        	that.cardList.forEach(res => {
				        		let cardDeatil = res
				        		that.cardOne = cardDeatil.cardNum
				        		that.cardType = cardDeatil.cardType
				        		that.cardId = cardDeatil.id
				        		that.secondaryCalliper = cardDeatil.secondaryCalliper
				        		that.maturityTime = cardDeatil.maturityTime
								that.cover = cardDeatil.cover
				        	})
				        }
				    },
				});
			},
			//查看权益
			to_interest() {
				this.$u.route({
					url: "/pages_card/interest/index",
					params: {
						cardNum: this.cardOne,
						cardType: this.cardType,
						maturityTime: this.maturityTime,
					}
				})
			},
			change() {
				uni.navigateTo({
					url: `/pages_card/benefitCards/index`
				})
			},
			to_home(){
				this.$u.route({
					url: "/pages_card/home/index",
					params: {
						cardId: this.cardId,
					}
				})
			},
			// getCardLoginToken(){
			// 	const that = this;
			// 	uni.request({
			// 		url: `${benefitCardUrl}/web/h5_token/open/loginH5`,
			// 		method: 'POST',
			// 		data: {
			// 			phonenumber: that.userInfo.mobile,
			// 		},
			// 		success(res) {
			// 			if (res.data.code === 200) {
			// 				that.$store.commit('SET_TOKEN_Benefit_Card', res.data.data);
			// 				that.getList();
			// 			} else {
			// 				uni.showToast({
			// 					title: res.data.msg,
			// 					icon: 'none'
			// 				})
			// 			}
			// 		},
			// 		fail(error) {
			// 			uni.showToast({
			// 				title: '请求失败',
			// 				icon: 'none'
			// 			})
			// 			reject(error)
			// 		}
			// 	})
			// }
		},
	};
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.card_content {
		display: inline-block;
		width: 100%;
		vertical-align: middle;
		cursor: pointer;
		background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/20/1a65b8ce4201488f8567128ae503752c.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 2.375rem 0rem;
	}

	.bgcard {
		display: inline-block;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		vertical-align: middle;
		cursor: pointer;
		background-image: url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/20/1a65b8ce4201488f8567128ae503752c.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.card_illustrate {
		padding: 3.4375rem;
	}

	.card_illustrate_phone {
		margin-top: 1.75rem;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0.875rem;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.6);
	}

	.card_illustrate_phone_img {
		width: 1.25rem;
		height: 1.25rem;
		margin-right: .125rem;
	}

	.card_illustrate_btn {
		margin-top: 3.125rem;
		width: 100%;
		height: 3.25rem;
		background: linear-gradient(315deg, #EAA95B 0%, #FCE0B1 100%);
		border-radius: 0.75rem;
		font-size: 1rem;
		font-weight: 500;
		color: #473920;
		text-align: center;
		line-height: 3.25rem;
	}

	.illustrates {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.illustrate_line {
		width: 0rem;
		height: 1.6875rem;
		border: 0.0625rem solid rgba(255, 255, 255, 0.5);
	}

	.illustrate {
		width: 3.75rem;
		text-align: center;
	}

	.illustrate_img {
		width: 1.5rem;
		height: 1.5rem;
	}

	.illustrate_t {
		margin-top: .25rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: #FFFFFF;
	}

	.home {
		width: 6.5rem;
		text-align: right;
	}

	.home_img {
		width: 1.875rem;
		height: 1.875rem;
	}

	.home_t {
		margin-top: -0.25rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: #FFFFFF;
	}


	.card {
		padding: 0 1.25rem;
	}

	.card_detail {
		display: inline-block;
		width: 100%;
		height: 13.75rem;
		vertical-align: middle;
		cursor: pointer;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.card_number {
		text-align: right;
		margin: 11.25rem 2rem 0 0;
		font-size: 0.75rem;
		color: #FFFFFF;
	}

	.card_numberA {
		margin: 11.25rem 0 0 2rem;
		font-size: 0.75rem;
		color: #0a0a0af9;
	}
	
	.card_change {
		text-align: right;
		margin: 2.85rem 2rem 0 0;
		font-size: 0.75rem;
		color: #FFFFFF;
		margin-top: .625rem;
	}


	.card_top,
	.card_topD {
		padding: 3.125rem 1.875rem 1.25rem;
		font-size: 1.625rem;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 500;
		color: #EAD7AC;
	}

	.card_topD {
		padding: 3.125rem 1.875rem 0;
	}

	.card_top_line {
		width: 1.75rem;
		height: 0.1875rem;
		background: #EAD7AC;
		border-radius: .1875rem;
		margin: 1.5rem 0 .875rem;
	}

	.card_top_t {
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: rgba(234, 215, 172, 0.6);
	}
</style>